@charset "utf-8";
@import 'layout.less';

/**************** TABLE COMMON STYLES ***************/
@color-border: #cdced3;

.centered{text-align: center !important;}

div.container-group{
    border: none;
    margin-bottom: 20px;
    div.header{
        border: 1px solid @color-border;
        border-bottom: none;
    }
    div.body{border: 1px solid @color-border;}
}

table.table{
    margin: 0px;

    th, td{
        border: 1px solid @color-border;
        &:first-child{border-left: none;}
        &:last-child{border-right: none;}
    }
    &.table-striped{
        tbody tr:nth-child(2n) td {background-color: #f7f7f9;}
        tbody tr:nth-child(2n+1) td {background-color: #fff;}
    }
    thead{
        tr{
            background: #f8fafd; /* Old browsers */
            /* IE9 SVG, needs conditional override of 'filter' to 'none' */
            background: url();
            background: -moz-linear-gradient(top, #f8fafd 0%, #eff1f4 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8fafd), color-stop(100%,#eff1f4)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #f8fafd 0%,#eff1f4 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #f8fafd 0%,#eff1f4 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #f8fafd 0%,#eff1f4 100%); /* IE10+ */
            background: linear-gradient(top, #f8fafd 0%,#eff1f4 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8fafd', endColorstr='#eff1f4',GradientType=0 ); /* IE6-8 */
        }
        th{
            border-top: 1px solid #fff;
            text-align: center;
            font-weight: 100;

            input[type="checkbox"]{margin: 0px;}

            &.header{
                background-image: url(../img/tablesorter/bg.gif);
                background-repeat: no-repeat;
                background-position: center right;
                cursor: pointer;
            }
            &.headerSortUp {
                background-image: url(../img/tablesorter/asc.gif);
            }
            &.headerSortDown {
                background-image: url(../img/tablesorter/desc.gif);
            }
        }
    }
    tbody{
        font-size: 13px;
        tr{
            &:last-child{
                td{border-bottom: none;}
            }
            td{
                vertical-align: middle;
                input[type="checkbox"]{margin: 0px;}
            }
        }
    }
}

ul.operations{
    margin: 0px;
    padding: 0px;

    li{
        border: 1px solid @color-border;
        display: inline-block;

        a{
            display: block;
            padding: 3px 6px;
            .opacity(.7);

            background: #f7f9fc; /* Old browsers */
            /* IE9 SVG, needs conditional override of 'filter' to 'none' */
            background: url();
            background: -moz-linear-gradient(top, #f7f9fc 0%, #eef0f3 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f9fc), color-stop(100%,#eef0f3)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #f7f9fc 0%,#eef0f3 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #f7f9fc 0%,#eef0f3 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #f7f9fc 0%,#eef0f3 100%); /* IE10+ */
            background: linear-gradient(top, #f7f9fc 0%,#eef0f3 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fc', endColorstr='#eef0f3',GradientType=0 ); /* IE6-8 */

            &:hover{
                .opacity(1);
            }
        }
    }
}

div.pagination{
    margin: 0px;
    display: inline-block;
    /*position: absolute;*/
    /*right: 0;*/
    /*top: 0;*/

    .activeBtn(){
        border-color: #2355ac;
        color: #fff;

        background: #4f95dc; /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url();
        background: -moz-linear-gradient(top, #4f95dc 0%, #2d61b8 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f95dc), color-stop(100%,#2d61b8)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #4f95dc 0%,#2d61b8 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #4f95dc 0%,#2d61b8 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #4f95dc 0%,#2d61b8 100%); /* IE10+ */
        background: linear-gradient(top, #4f95dc 0%,#2d61b8 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f95dc', endColorstr='#2d61b8',GradientType=0 ); /* IE6-8 */
    }
    .pagerButtons(){
        background: #eff3f9; /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url();
        background: -moz-linear-gradient(top, #eff3f9 0%, #dee2e8 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eff3f9), color-stop(100%,#dee2e8)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #eff3f9 0%,#dee2e8 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #eff3f9 0%,#dee2e8 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #eff3f9 0%,#dee2e8 100%); /* IE10+ */
        background: linear-gradient(top, #eff3f9 0%,#dee2e8 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff3f9', endColorstr='#dee2e8',GradientType=0 ); /* IE6-8 */
    }
    .disabledButton(){
        cursor: default;
        border: 1px solid @color-border;
        .pagerButtons;
    }

    ul{
        position: absolute;
        right: 0;
        top: 8px;
        margin: 0px;

        -moz-box-shadow:    none;
        -webkit-box-shadow: none;
        -ms-filter:         none;
        filter:             none;
        box-shadow:         none;

        .border-radius(0px);

        li{
            display: inline-block;
            margin: 0px 2px;
            &:first-child{
                margin-left: 0px;
                margin-right: -1px;

                a {
                    padding-left: 9px; 
                    padding-right: 9px;
                    .border-radius(0px);
                    .pagerButtons();

                    &.disabled:hover{ .disabledButton(); }
                }
            }
            &:last-child{
                a {
                    padding-left: 9px; 
                    padding-right: 9px;
                    .border-radius(0px);
                    .pagerButtons();

                    &.disabled:hover{ .disabledButton(); }
                }
            }
            a{
                line-height: 28px;
                padding: 0px 12px;
                border: 1px solid @color-border;
                color: #838383;
                .border-radius(0px);

                &.active{ .activeBtn; }
                &:hover{ .activeBtn; }
            }
        }
    }
}

table + div.toolbar{
    border-top: 1px solid @color-border;
    border-bottom: none;

    p{margin: 0}
}

div.toolbar{
    border-bottom: 1px solid @color-border;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;

    background: #f5f7fa; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url();
    background: -moz-linear-gradient(top, #f5f7fa 0%, #f3f5f9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f7fa), color-stop(100%,#f3f5f9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f5f7fa 0%,#f3f5f9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f5f7fa 0%,#f3f5f9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f5f7fa 0%,#f3f5f9 100%); /* IE10+ */
    background: linear-gradient(top, #f5f7fa 0%,#f3f5f9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f7fa', endColorstr='#f3f5f9',GradientType=0 ); /* IE6-8 */

    form{
        margin: 0px;
        padding: 0px;
        position: relative;

        input.pagedisplay{
            display: inline-table;
            vertical-align: top;
            margin-top: 7px;
            background-color: transparent;
            border: none;
            box-shadow: none;
        }

        input, select{
            .border-radius(0px);
        }
        label{
            position: absolute;
            right: 0px;
        }
    }
}

ul.toolbar-operations{
    position: absolute;
    margin: 0px;
    top: 6px;
    right: 20px;

    li{
        border: 1px solid @color-border;
        width: 80px;
        display: inline-block;
        position: relative;
        padding: 5px 10px;

        .box-sizing-border-box();
        .opacity(70);
        @transition: 0.2s, ease;
        .transition(@transition);

        background: #f7f9fc; /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url();
        background: -moz-linear-gradient(top, #f7f9fc 0%, #eef0f3 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f9fc), color-stop(100%,#eef0f3)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #f7f9fc 0%,#eef0f3 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #f7f9fc 0%,#eef0f3 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #f7f9fc 0%,#eef0f3 100%); /* IE10+ */
        background: linear-gradient(top, #f7f9fc 0%,#eef0f3 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fc', endColorstr='#eef0f3',GradientType=0 ); /* IE6-8 */

        &:hover{.opacity(1);}

        a{
            display: inline-block;
            width: 100%;
            font-size: 13px;
            color: #838383;
            &:hover{ text-decoration: none; }

            i{ margin-top: 2px; }
        }
    }
}

/***************** STATIC TABLES *********************/
div#static-table-toolbar{
    div.toolbar:first-child{
        border-top: 1px solid #fff;
        padding-top: 14px;
        padding-bottom: 14px;

        a{color: #7a7a7a;}
    }
}

/***************** DYNAMIC TABLES *********************/
div#dynamic-table-sortable{
    div.toolbar:first-child{
        border-top: 1px solid #fff;
        padding-top: 9px;
        padding-bottom: 9px;
    }
    div.toolbar:last-child{
        padding-top: 2px;
        padding-bottom: 1px;
    }
}

div#dynamic-table-sortable2{
    div.toolbar:first-child{
        border-top: 1px solid #fff;
        padding-top: 14px;
        padding-bottom: 14px;

        a{color: #7a7a7a;}

        ul{
            top: 15px;
            li{
                width: auto;
                background: none;
                filter: none;
                border: none;
                padding: 0px 5px;
                .opacity(1);

                a:hover{
                    text-decoration: underline;
                }
            }
        }
    }
}

div#dynamic-table-sortable3{
    div.options{
        @transition: .5s, ease;
        .transition(@transition);

            &.open{
            background-color: #f5f7fa;
        }
    }
    div.options-bar{
        height: 0;
        /*padding: 9px 20px;*/
        padding: 0 20px;
        background-color: #f5f7fa;
        border-bottom: 1px solid @color-border;

        form{
            margin: 0px;
            padding: 0px;
            position: relative;

            input.pagedisplay{
                display: inline-table;
                vertical-align: top;
                margin-top: 7px;
                background-color: transparent;
                border: none;
                box-shadow: none;
            }

            input, select{
                .border-radius(0px);
            }
            label{
                position: absolute;
                right: 0px;
            }
        }
    }
    div.toolbar.first{
        border-top: 1px solid #fff;
        padding-top: 14px;
        padding-bottom: 14px;

        a{color: #7a7a7a;}

        ul{
            top: 15px;
            li{
                width: auto;
                background: none;
                filter: none;
                border: none;
                padding: 0px 5px;
                .opacity(1);

                a:hover{
                    text-decoration: underline;
                }
            }
        }
    }
}

/*****************************************************************************/
/* Large desktop */
@media (min-width: 1200px) {}

@media (min-width: 1024px){}

@media (min-width: 980px){}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    ul.operations{
        li{
            margin: 0 0 5px;
            &:last-child{margin: 0px;}
        }
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    table#table-normal{
        tbody{
            tr{
                td:last-child{
                    padding-top: 4px;
                    padding-bottom: 3px;
                }
            }
        }
    }

    table.table{
        border-collapse: collapse;
        display: block;
        position: relative;
        width: 100%;

        thead{
            display: block;
            float: left;

            tr{
                display: block;
                th{
                    position: relative;
                    width: auto !important;
                    display: block;
                    padding-left: 15px;
                    padding-right: 15px;

                    border-right: 1px solid @color-border !important;
                    border-left: none;
                }
            }
        }
        tbody{
            display: block;
            overflow-x: auto;
            position: relative;
            white-space: nowrap;
            width: auto;

            tr{
                display: inline-block;
                vertical-align: top;
                margin: 0px;
                margin-left: -3px;

                &:last-child td{
                    border-bottom: 1px solid @color-border;
                    border-right: none;
                    border-bottom: none;
                }

                td{
                    display: block;
                    text-align: left !important;
                    border: 1px solid @color-border;
                    border-bottom: none;
                    border-right: none;
                    /*border-bottom: 1px solid @color-border;*/

                    &:first-child{
                        border-top: none;
                        border-left: 1px solid @color-border;
                    }
                }
            }
        }
    }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    div.toolbar{
        > *{
            padding-top: 10px !important;
            padding-bottom: 10px !important;

            &:first-child{
                padding-bottom: 0px !important;
            }
        }
        > ul{position: static;}
    }
}

@media (max-width: 320px) {}